<template>
  <div class='blindBox'>
    <div class='blindBox_bj'>
      <img :src="blindBoxInfo.appCoverPictureUrl" alt="">
      <!-- <img src="@/assets/img/mh_bj.png" alt="" /> -->
    </div>
    <div class="blindBox_content">
      <div class='blindBox_area'>
        <div class="content">
          <div class="mh_content">
            <img src="@/assets/img/mh_mh.png" alt="" />
            <div class="num">{{count}}次</div>
            <div class="box">
              <img class="img1" v-if="this.key==1?false:true" src="@/assets/img/mh1.png" @click="changeBox(1)" />
              <img class="img2" v-if="this.key==2?false:true" src="@/assets/img/mh2.png" @click="changeBox(2)" />
              <img class="img3" v-if="this.key==3?false:true" src="@/assets/img/mh3.png" @click="changeBox(3)" />
              <img class="img4" v-if="this.key==4?false:true" src="@/assets/img/mh4.png" @click="changeBox(4)" />
              <img class="img5" v-if="this.key==5?false:true" src="@/assets/img/mh5.png" @click="changeBox(5)" />
              <img class="img6" v-if="this.key==6?false:true" src="@/assets/img/mh6.png" @click="changeBox(6)" />
              <div :class="getGoods()" v-if="showGoods">
                <div class='goods_area'>
                  <div class='row1'>
                    <img :src="rewardData.picture" alt="">
                  </div>
                  <div class='row2'>{{rewardData.name}}</div>
                  <div class='row3'>
                    <div class='row3_red'>¥{{rewardData.sellingPrice}}</div>
                    <div class='row3_fff'>¥{{rewardData.totalAmount}}</div>
                  </div>
                  <div @click='toPayPrice(rewardData)'><img src="@/assets/img/mh_ljqg.png" alt=""></div>
                </div>
              </div>
            </div>
          </div>
          <!-- //抽中奖商品列表 -->
          <div class="goods_content" v-for="(item,index) of mysteryBoxInfoList" :key="index">
            <div class='top'>
              <div class='left'>
                <img :src="item.picture" alt="">
              </div>
              <div class='right'>
                <div class='title'>{{item.name}}</div>
                <div class='title1'>{{item.specification}}</div>
                <div class='title1'>{{item.manufacturerName}}</div>
                <div class='title1'>{{item.expirationDate}}</div>
                <div class='title2'>
                  <div class='left_title'>固定数量</div>
                  <div class='right_num'>{{item.quantity}}</div>
                </div>
                <div class='title3'>
                  <div class='red'>¥{{item.sellingPrice}}</div>
                  <div class='fff'>¥{{item.totalAmount}}</div>
                </div>
              </div>
              <div class='ygm' v-if="item.status==1"><img src="@/assets/img/mh_ygm.png" alt=""></div>
            </div>
            <div class='bottom'>
              <img class='qg' @click="toPayPrice(item)" v-if="item.status==0" src="@/assets/img/mh_btn_wgm.png" alt="">
              <img class='qg' v-if="item.status==1" src="@/assets/img/mh_btn_ygm.png" alt="">
              <img class='qg' v-if="item.status==2" src="@/assets/img/mh_btn_ysx.png" alt="">
            </div>
          </div>
          <!-- //规则 -->
          <div class="gz_content">
            <div class="top">
              <img src="@/assets/img/mh_t_bj.png" alt="" />
            </div>
            <div class="center">
              <div class='row' v-for="(item,index ) of blindBoxInfo.description" :key="index">{{item}}</div>
            </div>
            <div class="bottom">
              <!-- 中奖名单 -->
              <div class="peopel_content">
                <div class="title">
                  <img src="@/assets/img/mh_zjyh.png" alt="" />
                </div>
                <SwiperScroll style="height:5.4rem" ref="swiperScroll" :sliderNum="6" :datasource="prizeList" :autoPlay="true" :autoPlayTime="1000" :speed="1000">
                  <template slot-scope="{ item }">
                    <div class="scroll_item">
                      <span class="title_left">{{ item.userName }}</span><span class="title_right">{{ item.prizeName }}</span>
                    </div>
                  </template>
                </SwiperScroll>
              </div>
              <img src="@/assets/img/mh_b_bj.png" alt="" />
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 盲盒中奖弹窗 -->
    <div v-if="showDialog" class='showDialog'>
      <div class='background_area'>
        <img class='bj_img' src="https://image.hezongyy.com/pcimage/20211109img/mh_h5_zj_bg.png" alt="">
        <div class='goods_area'>
          <img class='zz_img' src="https://image.hezongyy.com/pcimage/20211109img/h5_mh_tpbk_goods.png" alt="">
          <div class='row1'><img :src="rewardData.picture" alt=""></div>
        </div>
        <div class="goods_info">
          <div class='left'>
            <div class='top'>原价 {{rewardData.totalAmount}}</div>
            <div class='bottom'><span style="font-size:20px">￥</span>{{rewardData.sellingPrice}}</div>
          </div>
          <div class='right'>固定数量<span>{{rewardData.quantity}}</span></div>
        </div>
        <div class='goods_info1'>
          <div class='info_row1'>{{rewardData.name}}</div>
          <div class='info_row2'>{{rewardData.manufacturerName}}</div>
          <div class='info_row2'>效期:{{rewardData.expirationDate}}</div>
          <div class='info_row2'>{{rewardData.specification}}</div>
        </div>
        <div class='by_btn' @click="toPayPrice(rewardData)">
          <img src="https://image.hezongyy.com/pcimage/20211109img/mh_h5_tc_btn.png" alt="">
          <div class='text'>{{rewardData.quantity}}{{rewardData.unit}}共{{rewardData.sellingPrice}}元</div>
        </div>
        <div class='close_btn' @click='closeShowDialog()'>
          <img src="https://image.hezongyy.com/pcimage/20211109img/mh_tc_x.png" alt="">
        </div>
      </div>
    </div>
    <van-overlay :show="activeLoadingShow" @click="show = false">
      <div class="wrapper" @click.stop>
        <div class="activeLoading"><img :src="activeLoading" alt="" /></div>
      </div>
    </van-overlay>
  </div>
</template>
<script>
//引入保存所有接口的url文件
import url from '@/axios/apiUrl'
import { getRequest } from '@/api/indexGet'
import SwiperScroll from '@/components/SwiperScroll'
import activeLoading from '@/assets/image/activeLoading.gif'
export default {
  components: {
    SwiperScroll,
  },
  data() {
    return {
      activeLoadingShow: false,
      activeLoading,
      prizeList: [],
      swiperData: [],
      blindBoxInfo: {}, //信息返回集合
      luckyDrawId: '', //抽奖id
      showGoods: false,
      key: '',
      count: '', //次数
      showDialog: false, //显示盲盒中奖弹窗
      mysteryBoxInfoList: [], //中奖信息列表
      rewardData: {}, //抽中弹窗商品详情
    }
  },
  mounted() {
    //获取盲盒信息
    this.getMysteryBoxInfo()
    this.gotop()
  },
  methods: {
    //阶梯价
    //关闭抽中奖盒子
    closeShowDialog() {
      this.getMysteryBoxInfo()
      this.showDialog = false
    },
    //去支付跳转原生
    toPayPrice(item) {
      var isIos = !!navigator.userAgent.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/) //ios终端
      if (isIos) {
        let form = {}
        form.openBoxId = item.id
        window.webkit.messageHandlers.showBoxGoodsPayAlert.postMessage(form)
      } else {
        japp.placeBlindBox(item.id)
      }
    },
    //选择盒子
    async changeBox(key) {
      if (this.count <= 0) {
        this.$toast('今日已经没有可用次数了~')
        return
      } else {
        this.activeLoadingShow = true
        this.key = key
        let res = await getRequest(url.openMysteryBox + '/' + this.luckyDrawId)
        if (res.data.code == '000000') {
          this.activeLoadingShow = false
          this.showDialog = true
          this.rewardData = res.data.content
          this.count--
          this.showGoods = true
        } else if (res.data.code != '000000') {
          this.count--
          this.key = -1
          this.activeLoadingShow = false
          this.showGoods = false
          this.$toast(res.data.message)
        }
      }
    },
    //修改选中盲盒样式以及位置
    getGoods() {
      switch (this.key) {
        case 1:
          return 'goods_box1'
          break
        case 2:
          return 'goods_box2'
          break
        case 3:
          return 'goods_box3'
          break
        case 4:
          return 'goods_box4'
          break
        case 5:
          return 'goods_box5'
          break
        case 6:
          return 'goods_box6'
          break
      }
    },
    //获取盲盒信息
    async getMysteryBoxInfo() {
      let res = await getRequest(url.getMysteryBoxInfo)
      if (res.data.code == '000000') {
        this.blindBoxInfo = res.data.content //结果
        this.luckyDrawId = this.blindBoxInfo.luckyDrawId //抽奖id
        this.count = this.blindBoxInfo.times //抽奖次数
        this.prizeList = this.blindBoxInfo.luckyWinners //中奖名单
        this.mysteryBoxInfoList = this.blindBoxInfo.mysteryBoxInfoList //中奖商品
        this.$nextTick(() => {
          this.$refs.swiperScroll.refresh()
        })
      } else if (res.data.message == '系统异常') {
        this.$toast('该活动已结束~')
      } else {
        this.$toast(res.data.message)
      }
    },
    //返回顶部
    gotop() {
      document.documentElement.scrollTop = document.body.scrollTop = 0
    },
  },
}
</script>
<style lang="less" scoped src="./index.less"></style>
